<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user';
import { Toast } from '@/utils/uniapi/prompt';
import { reactive, ref } from 'vue';

const form = reactive({
  email: '',
  password: '',
  confirmPassword: '',
  verificationCode: '',
});

const countdown = ref(0);
const timer = ref<NodeJS.Timeout | null>(null);
const isLoading = ref(false);
const passwordVisible = ref(false);
const confirmPasswordVisible = ref(false);

// 获取验证码
function getVerificationCode() {
  if (countdown.value > 0 || !form.email)
    return;

  if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(form.email)) {
    Toast('请输入有效的邮箱地址', { duration: 1500 });
    return;
  }

  // 模拟发送验证码
  countdown.value = 60;
  timer.value = setInterval(() => {
    countdown.value--;
    if (countdown.value === 0 && timer.value) {
      clearInterval(timer.value);
    }
  }, 1000);

  Toast('验证码已发送', { duration: 1500 });
}

// 提交注册
async function submit() {
  if (isLoading.value)
    return;

  if (!form.email || !form.password || !form.confirmPassword || !form.verificationCode) {
    Toast('请填写完整信息', { duration: 1500 });
    return;
  }

  if (form.password !== form.confirmPassword) {
    Toast('两次输入的密码不一致', { duration: 1500 });
    return;
  }

  if (form.password.length < 6) {
    Toast('密码长度不能少于6位', { duration: 1500 });
    return;
  }

  try {
    isLoading.value = true;
    await useUserStore().register(form);
    Toast('注册成功', { duration: 1500 });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } finally {
    isLoading.value = false;
  }
}
</script>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部背景 -->
    <view class="h-64 bg-gradient-to-br from-blue-500 to-blue-400 relative overflow-hidden">
      <view class="absolute inset-0 opacity-10">
        <view class="absolute top-1/4 left-1/4 w-40 h-40 rounded-full bg-white" />
        <view class="absolute bottom-1/3 right-1/3 w-48 h-48 rounded-full bg-white" />
      </view>
      <view class="absolute bottom-8 left-8">
        <text class="text-2xl font-bold text-white">
          加入我们
        </text>
        <text class="block text-white/90 mt-1">
          创建您的专属账号
        </text>
      </view>
    </view>

    <!-- 注册表单 -->
    <view class="mx-4 -mt-20 bg-white rounded-2xl shadow-xl p-6 relative z-10 animate-fade-in">
      <view class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
        <view class="w-2 h-6 bg-blue-500 rounded-full mr-3" />
        注册新账号
      </view>

      <!-- 邮箱输入 -->
      <view class="mb-5">
        <view class="text-sm text-gray-600 mb-2 font-medium">
          邮箱
        </view>
        <view class="relative">
          <input
            v-model="form.email"
            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500 transition-all"
            placeholder="请输入邮箱"
            type="email"
          >
          <view class="absolute right-3 top-3 text-gray-400">
            <i-mdi-email-outline class="w-5 h-5" />
          </view>
        </view>
      </view>

      <!-- 验证码输入 -->
      <view class="mb-5">
        <view class="text-sm text-gray-600 mb-2 font-medium">
          验证码
        </view>
        <view class="flex items-center">
          <view class="relative flex-1">
            <input
              v-model="form.verificationCode"
              class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500 transition-all"
              placeholder="请输入验证码"
              type="text"
              maxlength="6"
            >
            <view class="absolute right-3 top-3 text-gray-400">
              <i-mdi-shield-key-outline class="w-5 h-5" />
            </view>
          </view>
          <button
            class="ml-3 px-4 py-3 bg-gradient-to-r from-blue-500 to-blue-400 text-white rounded-xl shadow-sm active:opacity-90 transition-all whitespace-nowrap min-w-28"
            :class="{ 'from-gray-400 to-gray-300': countdown > 0 }"
            :disabled="countdown > 0 || !form.email"
            @click="getVerificationCode"
          >
            {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
          </button>
        </view>
      </view>

      <!-- 密码输入 -->
      <view class="mb-5">
        <view class="text-sm text-gray-600 mb-2 font-medium">
          密码 (至少6位)
        </view>
        <view class="relative">
          <input
            v-model="form.password"
            :type="passwordVisible ? 'text' : 'password'"
            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500 transition-all pr-12"
            placeholder="请输入密码"
          >
          <view class="absolute right-3 top-3 flex space-x-2">
            <view
              class="text-gray-400 active:opacity-70"
              @click="passwordVisible = !passwordVisible"
            >
              <i-mdi-eye-off-outline v-if="!passwordVisible" class="w-5 h-5" />
              <i-mdi-eye-outline v-else class="w-5 h-5" />
            </view>
          </view>
        </view>
      </view>

      <!-- 确认密码输入 -->
      <view class="mb-6">
        <view class="text-sm text-gray-600 mb-2 font-medium">
          确认密码
        </view>
        <view class="relative">
          <input
            v-model="form.confirmPassword"
            :type="confirmPasswordVisible ? 'text' : 'password'"
            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-500 transition-all pr-12"
            placeholder="请再次输入密码"
          >
          <view class="absolute right-3 top-3 flex space-x-2">
            <view
              class="text-gray-400 active:opacity-70"
              @click="confirmPasswordVisible = !confirmPasswordVisible"
            >
              <i-mdi-eye-off-outline v-if="!confirmPasswordVisible" class="w-5 h-5" />
              <i-mdi-eye-outline v-else class="w-5 h-5" />
            </view>
          </view>
        </view>
      </view>

      <!-- 注册按钮 -->
      <button
        class="w-full py-3 bg-gradient-to-r from-blue-500 to-blue-400 text-white rounded-xl shadow-md active:opacity-90 transition-all flex items-center justify-center"
        :class="{ 'opacity-80': isLoading }"
        :disabled="isLoading"
        @click="submit"
      >
        <i-mdi-loading v-if="isLoading" class="animate-spin w-5 h-5 mr-2" />
        <text>{{ isLoading ? '注册中...' : '立即注册' }}</text>
      </button>

      <!-- 登录提示 -->
      <view class="mt-6 text-center text-sm text-gray-600">
        已有账号？
        <text
          class="text-blue-500 font-medium active:opacity-70"
          @click="uni.navigateBack()"
        >
          去登录
        </text>
      </view>
    </view>

    <!-- 用户协议 -->
    <view class="mt-6 text-center text-xs text-gray-400 px-8">
      注册即表示您同意我们的
      <text class="text-blue-400" @click="Toast('查看用户协议')">
        用户协议
      </text>
      和
      <text class="text-blue-400" @click="Toast('查看隐私政策')">
        隐私政策
      </text>
    </view>
  </view>
</template>

<style lang="scss">
.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
